.middle-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.middle-box .interval-total {
  position: relative;
  border: 1px solid #204a9a;
  height: 9.9%;
}
.middle-box .interval-total .interval-total-box {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.middle-box .interval-total .interval-total-box .interval-total-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 29%;
}
.middle-box .interval-total .interval-total-box .interval-total-item .interval-total-item-label {
  font-size: 16px;
  color: #fff;
  line-height: 100%;
  margin-right: 10px;
}
.middle-box .interval-total .interval-total-box .interval-total-item .data-item {
  width: 65%;
}
.middle-box .interval-total .interval-total-box .interval-total-item .border-right {
  width: 1px;
  height: 100%;
  background-image: linear-gradient(0deg, #0d112c 0%, #154e9b 50%, #0d112c 100%);
}
.middle-box .interval-total .interval-total-box .interval-total-item:last-child .border-right {
  display: none;
}
.middle-box .map-box {
  width: 100.45%;
  height: 60%;
  background: url("http://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/mobile-map-bg.png") no-repeat left top;
  background-size: 100% 100%;
}
.middle-box .map-box #trade-map {
  width: 100%;
  height: 100%;
}
.middle-box .middle-bottom {
  height: 27.27%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.middle-box .middle-bottom .middle-bottom-left {
  width: 26.9%;
  position: relative;
  border: 1px solid #585f8d;
}
.middle-box .middle-bottom .middle-bottom-left .middle-bottom-left-box {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.middle-box .middle-bottom .middle-bottom-left .middle-bottom-left-box .middle-bottom-left-left {
  height: 70%;
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 6%;
}
.middle-box .middle-bottom .middle-bottom-left .middle-bottom-left-box .middle-bottom-left-left .middle-bottom-left-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.middle-box .middle-bottom .middle-bottom-left .middle-bottom-left-box .middle-bottom-left-right {
  height: 100%;
  width: 55%;
  display: flex;
  justify-content: space-around;
}
.middle-box .middle-bottom .middle-bottom-right {
  width: 71.9%;
  position: relative;
  border: 1px solid #585f8d;
}
.middle-box .middle-bottom .middle-bottom-right .middle-bottom-right-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
/* 动画 */
.slide-fade-enter-active {
  transition: all 2s ease;
}
.slide-fade-leave-active {
  transition: all 0.1s cubic-bezier(2, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(50%);
}
